<template>
  <div class="person-box">
    <div class="form-btn">
      <p>手机号：{{ userInfo.userPhone }}</p>
      <el-form :model="risForm" :rules="risRules" ref="risFormRef" label-position="right"
               status-icon>
        <el-form-item label="手机号" prop="userPhone">
          <el-input v-model="risForm.userPhone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="验证码" prop="userCode">
          <el-input v-model="risForm.userCode" placeholder="请输入验证码" style="width: 60%;" size="small"
                    @keyup.enter="savePhone(risFormRef)"/>
          <el-image style="width: 40%;" :src="codeUrl" fit="cover" @click="changCode"/>
        </el-form-item>
        <el-button type="danger" size="large" class="RisBtn" @click="savePhone(risFormRef)">点击修改</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {validatorUsername, validatorPwd, validatorPhone} from "@/utils/globalVariables"
import {ref, reactive, onMounted} from "vue"
import {ElMessage, ElMessageBox} from 'element-plus'
import router from "@/router"
import api from "@/api"
import store from '@/store/index'

onMounted(() => {
  codeUrl.value = store.state.baseUrl + codeUrl.value
})
const codeUrl = ref("/verification")
const changCode = () => {
  codeUrl.value = codeUrl.value + "?" + Math.random();
}
const userInfo = store.state.userInfos

const risForm = reactive({
  userId: '',
  userPhone: '',
})
const risRules = {
  userPhone: [
    {required: true, message: '手机号不能为空', trigger: 'change'},
    {validator: validatorPhone, triger: 'blur'}
  ],
  userCode: [
    {required: true, message: '验证码不能为空', trigger: 'change'},
  ],
}

const risFormRef = ref(null)
const savePhone = () => {
  ElMessageBox.confirm(
      '确定修改手机号么？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        risFormRef.value.validate((valid) => {
          if (valid) {
            checkRis(risForm)
          } else {
            ElMessage.error('请按要求填写')
          }
        })
      })
      .catch(() => {
        ElMessage.info('取消修改')
      })

}
const checkRis = async (user) => {
  try {
    user.userId = userInfo.userId
    const response = await api.updateUser(user)
    if (response.code === 1) {
      ElMessage.error(response.message)
    } else {
      userInfo.userPhone = user.userPhone
      store.commit('setUserInfo', userInfo)
      ElMessage.success('修改成功！')
    }
  } catch (error) {
    throw new Error('Failed to fetch rating data')
  }
}


</script>

<style scoped lang="less">
.person-box {
  padding: 10% 20%;
}

.form-btn {
  padding: 50px 5%;
  margin: 0 auto;

  .el-form-item {
    margin-bottom: 26px;
  }

  .subBtn {
    width: 100%;
    margin-top: 100px;
  }

  .RisBtn {
    width: 100%;
    margin-top: 20px;
  }

  .el-input {
    width: 100%;
  }

  /deep/ .el-input__inner {
    font-size: 16px;
    height: 35px;
  }
}
@media screen and (max-width: 720px) {
  .person-box{
    padding: 0 10%;
  }

  .form-btn {
    padding: 50px 0;
  }
}
</style>